<template id="SelectBlock">
  <div>
    <div class="topPath">
      <el-input
        placeholder="请输入人员姓名"
        v-model="searchData"
        @keyup.enter.native="search"
      >
        <el-button slot="append" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-input>
    </div>
    <div class="mainPath">
      <i class="close" @click="closeSelectBlock"></i>
      <div class="classA">
        <div class="positionClassA">
          <div
            v-for="(item, index) in legendList"
            :key="index"
            class="lineClassA"
            @click="choseLegend(item, index)"
            @mouseover="selectItem(item, index)"
            :class="{ isActive: item.isChose }"
          >
            <div
              class="legendBackground"
              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
            ></div>
            <p class="legendName">{{ item.name }}</p>
            <div
              class="legendRight"
              v-if="item.isChild"
              :style="{ backgroundImage: 'url(' + item.rightArrow + ')' }"
            ></div>
          </div>
        </div>
      </div>
      <div class="classB" v-if="isShowPerson" @mouseleave="leavePerson()">
        <el-checkbox
          v-model="personAll"
          @change="personCheckAllChange"
          class="personAll"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="personItems"
          @change="personCheckChange"
          style="margin-bottom: 0.16vw"
        >
          <el-checkbox
            v-for="(item, index) in personData"
            :label="item"
            :key="index"
            class="checkItem"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="classC" v-if="isShowMonitor" @mouseleave="leaveMonitor()">
        <el-checkbox
          v-model="monitorAll"
          @change="monitorCheckAllChange"
          class="personAll"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="monitorItem"
          @change="monitorCheckChange"
          style="margin-bottom: 0.16vw"
        >
          <el-checkbox
            v-for="item in monitorData"
            :label="item.id"
            :key="item.id"
            class="checkItem"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div
        class="classD"
        v-if="isShowInspection"
        @mouseleave="leaveInspection()"
      >
        <el-checkbox-group
          v-model="inspectionItems"
          @change="inspectionCheckChange"
          style="margin-bottom: 0.16vw"
        >
          <el-checkbox
            v-for="(item, index) in inspectionData"
            :label="item"
            :key="index"
            class="checkItem"
            >{{ item.task_name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="classE" v-if="isShowEnclosure" @mouseleave="leaveEnclosure()">
        <el-checkbox
          v-model="enclosureAll"
          @change="enclosureCheckAllChange"
          class="enclosureAll"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="enclosureItems"
          @change="enclosureChange"
          style="margin-bottom: 0.16vw"
        >
          <el-checkbox
            v-for="item in enclosureData"
            :label="item"
            :key="item.id"
            class="checkItem"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="classF" v-if="isShowVehicle" @mouseleave="leaveVehicle()">
        <el-checkbox-group
          v-model="vehicleItems"
          @change="vehicleChange"
          style="margin-bottom: 0.16vw"
        >
          <el-checkbox
            v-for="item in vehicleData"
            :label="item"
            :key="item.id"
            class="checkItem"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="classG" v-if="isShowArea" @mouseleave="leaveArea()">
        <el-checkbox
          v-model="areaAll"
          @change="areaCheckAllChange"
          class="areaAll"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="areaItems"
          @change="areaChange"
          style="margin-bottom: 0.16vw"
          class="areaItem"
        >
          <el-checkbox
            v-for="item in areaData"
            :label="item"
            :key="item.id"
            class="checkItem"
            >{{ item.label }}
            <div class="itemColor"></div
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="classH" v-if="isShowRoad" @mouseleave="leaveRoad()">
        <el-checkbox
          v-model="roadAll"
          @change="roadCheckAllChange"
          class="roadAll"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="roadItems"
          @change="roadChange"
          style="margin-bottom: 0.16vw"
          class="roadItem"
        >
          <el-checkbox
            v-for="item in roadData"
            :label="item"
            :key="item.id"
            class="checkItem"
            >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import {
  selectCompanyList,
  selectMonitorList,
  selectPeopleById,
  searchPersonPosition,
  selectInspectionList,
  selectMonitorByIds,
} from "@/api/selectBlock";
import { mapState, mapMutations, mapActions } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "SelectBlock",
  components: {},
  // 定义属性
  data() {
    return {
      isShowEnclosure: false,
      isShowPerson: false,
      isShowMonitor: false,
      isShowInspection: false,
      isShowVehicle: false,
      isShowArea: false,
      isShowRoad: false,
      downArrow: require("@/assets/images/indexBody/legendList/downArrow.png"),
      searchData: "", //搜索人员名称
      legendList: [
        {
          icon: require("@/assets/images/indexBody/legendList/person.png"),
          name: "人员",
          realName: "person",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/monitor.png"),
          name: "监控",
          realName: "monitor",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/inspection.png"),
          name: "电子巡查",
          realName: "inspection",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/enclosure.png"),
          name: "围网",
          realName: "enclosure",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/vehicle.png"),
          name: "危化品车辆",
          realName: "vehicle",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/area.png"),
          name: "区域",
          realName: "area",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/road.png"),
          name: "道路",
          realName: "road",
          isChild: true,
          rightArrow: require("@/assets/images/indexBody/legendList/rightArrow.png"),
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/uav.png"),
          name: "无人机",
          realName: "uav",
          isChild: false,
          rightArrow: "",
          childData: "",
          isChose: false,
        },
        {
          icon: require("@/assets/images/indexBody/legendList/bayonet.png"),
          name: "卡口",
          realName: "bayonet",
          isChild: false,
          rightArrow: "",
          childData: "",
          isChose: false,
        },
      ],
      personAll: false, //全选
      monitorAll: false,
      enclosureAll: false,
      areaAll: false,
      roadAll: false,
      personItems: [],
      monitorItem: [],
      inspectionItems: [],
      enclosureItems: [],
      vehicleItems: [],
      areaItems: [],
      roadItems: [],
      personData: [],
      monitorData: [],
      inspectionData: [],
      enclosureData: [
        { id: 1, label: "一期" },
        { id: 2, label: "二期" },
        { id: 3, label: "三期" },
        { id: 4, label: "四期" },
        { id: 5, label: "卡口" },
      ],
      vehicleData: [
        { id: 1, label: "途强GPS" },
        { id: 2, label: "航天恒嘉GPS" },
      ],
      areaData: [
        { id: 1, label: "一般控制区" },
        { id: 2, label: "核心控制区" },
        { id: 3, label: "关键控制区" },
      ],
      roadData: [
        { id: 1, label: "道路" },
        { id: 2, label: "道路名称" },
      ],
    };
  },
  props: {
    monitorItems: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapMutations(["setPlaneOff"]),
    //获取公司列表
    async getCompanyList() {
      let res = await selectCompanyList();
      if (this.$iscode(res)) {
        this.personData = res.data.list;
      }
    },
    //获取监控列表
    async getMonitorList() {
      let res = await selectMonitorList();
      if (this.$iscode(res)) {
        let result = res.data.filter((item, index) => {
          if (item.id == 27) {
            return item.id;
          }
        });
        result.map((item, index) => {
          if (item.children.length > 0) {
            item.children.map((element, location) => {
              this.monitorData.push(element);
            });
          }
        });
      }
    },
    //获取电子巡查列表
    async getInspectionList() {
      let res = await selectInspectionList();
      if (this.$iscode(res)) {
        this.inspectionData = res.data.list;
      }
    },
    //根据企业id人员定位
    async getPersonPosition(options) {
      let res = await selectPeopleById(options);
      if (this.$iscode(res)) {
        this.$emit("openPersonFunction", res, "click");
      }
    },
    //人员定位查询
    async search() {
      Bus.$emit("removePerson");
      if (this.searchData) {
        let res = await searchPersonPosition({ realname: this.searchData });
        if (this.$iscode(res)) {
          this.$emit("openPersonFunction", res, "search");
        }
      } else {
        Bus.$emit("resetMap");
        this.$message({
          message: "请输入人员姓名",
          type: "warning",
        });
      }
    },
    //选择一级图例
    choseLegend(item, index) {
      if (!item.isChild) {
        item.isChose = !item.isChose;
      }
      if (item.isChose) {
        if (item.realName == "uav") {
          //打开无人机1
          this.setPlaneOff(true);
        } else if (item.realName == "bayonet") {
          this.$emit("openBayonetFunction"); //打开所有卡口
        }
      } else {
        if (item.realName == "uav") {
          //关闭无人机
          this.setPlaneOff(false);
        } else if (item.realName == "bayonet") {
          this.$emit("closeBayonetFunction"); //关闭所有卡口
        }
      }
    },

    //选中样式
    selectItem(item, index) {
      if (item.isChild && item.realName == "person") {
        this.isShowEnclosure = false;
        this.isShowMonitor = false;
        this.isShowInspection = false;
        this.isShowVehicle = false;
        this.isShowArea = false;
        this.isShowRoad = false;
        this.isShowPerson = true;
      } else if (item.isChild && item.realName == "monitor") {
        this.isShowEnclosure = false;
        this.isShowPerson = false;
        this.isShowInspection = false;
        this.isShowVehicle = false;
        this.isShowArea = false;
        this.isShowRoad = false;
        this.isShowMonitor = true;
      } else if (item.isChild && item.realName == "inspection") {
        this.isShowEnclosure = false;
        this.isShowPerson = false;
        this.isShowMonitor = false;
        this.isShowVehicle = false;
        this.isShowArea = false;
        this.isShowRoad = false;
        this.isShowInspection = true;
      } else if (item.isChild && item.realName == "enclosure") {
        this.isShowPerson = false;
        this.isShowMonitor = false;
        this.isShowInspection = false;
        this.isShowVehicle = false;
        this.isShowArea = false;
        this.isShowRoad = false;
        this.isShowEnclosure = true;
      } else if (item.isChild && item.realName == "vehicle") {
        this.isShowPerson = false;
        this.isShowMonitor = false;
        this.isShowInspection = false;
        this.isShowEnclosure = false;
        this.isShowArea = false;
        this.isShowRoad = false;
        this.isShowVehicle = true;
      } else if (item.isChild && item.realName == "area") {
        this.isShowPerson = false;
        this.isShowMonitor = false;
        this.isShowInspection = false;
        this.isShowEnclosure = false;
        this.isShowVehicle = false;
        this.isShowRoad = false;
        this.isShowArea = true;
      } else if (item.isChild && item.realName == "road") {
        this.isShowPerson = false;
        this.isShowMonitor = false;
        this.isShowInspection = false;
        this.isShowEnclosure = false;
        this.isShowVehicle = false;
        this.isShowRoad = false;
        this.isShowArea = false;
        this.isShowRoad = true;
      } else {
        this.isShowPerson = false;
        this.isShowMonitor = false;
        this.isShowInspection = false;
        this.isShowVehicle = false;
        this.isShowEnclosure = false;
        this.isShowArea = false;
        this.isShowRoad = false;
      }
    },
    //人员全选
    personCheckAllChange(val) {
      // console.time(1);
      Bus.$emit("removePerson");
      Bus.$emit("resetMap");
      this.personItems = val ? this.personData : [];
      if (this.personItems.length > 0) {
        this.legendList[0].isChose = true;
        let tempList = [];
        this.personItems.map((item, index) => {
          tempList.push(item.id);
        });
        let enterprise_id = { enterprise_id: tempList.join(",") };
        this.getPersonPosition(enterprise_id, "enterprise_id");
      } else {
        this.legendList[0].isChose = false;
        // Bus.$emit("removePerson");
        // Bus.$emit("resetMap");
      }
      // console.timeEnd(1);
    },
    //人员单选
    personCheckChange(val) {
      Bus.$emit("removePerson");
      Bus.$emit("resetMap");
      if (this.personItems.length > 0) {
        this.legendList[0].isChose = true;
        let tempList = [];
        this.personItems.map((item, index) => {
          tempList.push(item.id);
        });
        let enterprise_id = { enterprise_id: tempList.join(",") };
        this.getPersonPosition(enterprise_id, "enterprise_id");
      } else {
        this.legendList[0].isChose = false;
        // Bus.$emit("removePerson");
        // Bus.$emit("resetMap");
      }
    },
    //离开人员二级选项框
    leavePerson() {
      this.isShowPerson = false;
    },
    //监控全选
    monitorCheckAllChange(val) {
      if (val) {
        this.$emit("monitorSelectAll", this.monitorData);
      } else {
        this.$emit("monitorSelectAll", []);
        this.monitorItem = [];
      }
      Bus.$emit("removeMonitor");
      this.$nextTick(() => {
        this.monitorItems.map((item) => {
          this.monitorItem.push(item.id);
        });
        if (this.monitorItems.length > 0) {
          this.legendList[1].isChose = true;
          let tempList = [];
          this.monitorItems.map((item, index) => {
            tempList.push(item.id);
          });
          this.$emit("clickPublicMonitor");
          let ids = { ids: tempList.join(",") };
          this.getMonitorPosition(ids);
        } else {
          this.legendList[1].isChose = false;
          this.$emit("canclePublicMonitor");
        }
      });
    },
    //监控单选
    monitorCheckChange(val) {
      if (val) {
        this.$emit("monitorSelectAll", val);
      }
      Bus.$emit("removeMonitor");
      this.$nextTick(() => {
        this.monitorItem = this.monitorItems;
        if (this.monitorItems.length > 0) {
          this.legendList[1].isChose = true;
          let tempList = [];
          this.monitorItems.map((item, index) => {
            tempList.push(item);
          });
          if (tempList.includes(37)) {
            this.$emit("clickPublicMonitor");
          } else {
            this.$emit("canclePublicMonitor");
          }
          let ids = { ids: tempList.join(",") };
          this.getMonitorPosition(ids);
        } else {
          this.monitorAll = false;
          this.legendList[1].isChose = false;
          this.$emit("canclePublicMonitor");
        }
      });
    },
    //选中管廊监控
    chosePublicMonitor() {
      this.$nextTick(() => {
        this.monitorItem = [37];
        this.legendList[1].isChose = true;
      });
    },
    //取消选中管廊监控
    canclePublicMonitor() {
      this.monitorItem = [];
      this.legendList[1].isChose = false;
    },
    //获取监控定位
    async getMonitorPosition(options) {
      let res = await selectMonitorByIds(options);
      if (this.$iscode(res)) {
        this.$emit("openMonitorFunction", res);
      }
    },
    //离开监控二级选项框
    leaveMonitor() {
      this.isShowMonitor = false;
    },

    //电子巡查单选
    inspectionCheckChange() {
      this.inspectionItems.length > 1 && this.inspectionItems.shift();
      this.$nextTick(() => {
        let val =
          this.inspectionItems.length > 0 ? this.inspectionItems[0] : "";
      });
      Bus.$emit("RemoveInspectionRoad");
      if (this.inspectionItems.length > 0) {
        Bus.$emit("inspectionRoad", this.inspectionItems);
        this.legendList[2].isChose = true;
      } else {
        this.legendList[2].isChose = false;
        Bus.$emit("resetMap");
      }
    },
    //离开电子巡查二级选项框
    leaveInspection() {
      this.isShowInspection = false;
    },
    //离开围网二级选项框
    leaveEnclosure() {
      this.isShowEnclosure = false;
    },
    //围网全选
    enclosureCheckAllChange(val) {
      this.enclosureItems = val ? this.enclosureData : [];
      this.$emit("closeEnclosureFunction", { content: "all" });
      if (this.enclosureItems.length > 0) {
        this.legendList[3].isChose = true;
        this.$emit("openEnclosureFunction", { content: "all" });
      } else {
        this.legendList[3].isChose = false;
      }
    },
    //围网单选
    enclosureChange() {
      this.$emit("closeEnclosureFunction", { content: "all" });
      if (this.enclosureItems.length > 0) {
        this.legendList[3].isChose = true;
        let tempList = [];
        this.enclosureItems.map((item, index) => {
          tempList.push(item.id);
        });
        this.$emit("openEnclosureFunction", { content: tempList });
        if (this.enclosureItems.length == this.enclosureData.length) {
          this.enclosureAll = true;
        } else {
          this.enclosureAll = false;
        }
      } else {
        this.legendList[3].isChose = false;
        this.enclosureAll = false;
      }
    },
    //离开危化品车辆二级选项框
    leaveVehicle() {
      this.isShowVehicle = false;
    },
    //危化品车辆单选
    vehicleChange() {
      this.vehicleItems.length > 1 && this.vehicleItems.shift();
      this.$nextTick(() => {
        let val = this.vehicleItems.length > 0 ? this.vehicleItems[0] : "";
      });
      Bus.$emit("removeVehicle");
      Bus.$emit("closeVehicleFunction");
      if (this.vehicleItems.length > 0) {
        Bus.$emit("createVehicle", this.vehicleItems);
        this.legendList[4].isChose = true;
      } else {
        this.legendList[4].isChose = false;
        Bus.$emit("resetMap");
      }
    },
    //关闭选项框
    closeSelectBlock() {
      this.$emit("closeSelectBlock");
    },
    //离开区域二级选项框
    leaveArea() {
      this.isShowArea = false;
    },
    //区域全选
    areaCheckAllChange(val) {
      this.areaItems = val ? this.areaData : [];
      this.$emit("closeAreaFunction", { content: "all" });
      if (this.areaItems.length > 0) {
        this.legendList[5].isChose = true;
        this.$emit("openAreaFunction", { content: "all" });
      } else {
        this.legendList[5].isChose = false;
      }
    },
    //区域单选
    areaChange() {
      this.$emit("closeAreaFunction", { content: "all" });
      if (this.areaItems.length > 0) {
        this.legendList[5].isChose = true;
        let tempList = [];
        this.areaItems.map((item, index) => {
          tempList.push(item.id);
        });
        this.$emit("openAreaFunction", { content: tempList });
        if (this.areaItems.length == this.areaData.length) {
          this.areaAll = true;
        } else {
          this.areaAll = false;
        }
      } else {
        this.legendList[5].isChose = false;
        this.areaAll = false;
      }
    },
    //离开道路二级选项框
    leaveRoad() {
      // this.isShowRoad=false;
    },
    //道路全选
    roadCheckAllChange(val) {
      this.roadItems = val ? this.roadData : [];
      Bus.$emit("closeRoadAndRoadName");
      if (this.roadItems.length > 0) {
        this.legendList[6].isChose = true;
        Bus.$emit("openRoadAndRoadName");
      } else {
        this.legendList[6].isChose = false;
      }
    },
    //道路单选
    roadChange() {
      Bus.$emit("closeRoadAndRoadName");
      if (this.roadItems.length > 0) {
        this.legendList[6].isChose = true;
        this.roadItems.map((item, index) => {
          if (item.id == 1) {
            Bus.$emit("openRoad");
          } else if (item.id == 2) {
            Bus.$emit("openRoadName");
          }
        });
        if (this.roadItems.length == this.roadData.length) {
          this.roadAll = true;
        } else {
          this.roadAll = false;
        }
      } else {
        this.legendList[6].isChose = false;
        this.roadAll = false;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCompanyList();
    this.getMonitorList();
    this.getInspectionList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.topPath {
  /deep/ .el-input__inner {
    padding: 0.26vw 0.34vw;
    width: 6.3vw;
    background-image: linear-gradient(
      153deg,
      #34a1ff 0%,
      #0f3962 27%,
      #0c3054 100%
    );
    font-size: 0.42vw;
    color: #95cbff;
    height: 1.19vw;
    border: solid 0.03vw #34a1ff;
    border-right: 0;
  }

  /deep/ .el-input-group__append {
    padding: 0 0.14vw;
    width: 1.04vw;
    background-color: #206ec0;
    font-size: 0.42vw;
    color: #fff;
    height: 0.2vw;
    border: solid 0.03vw #34a1ff;
    border-left: none;
    /deep/ .el-button {
      padding: 0;
      text-align: center;
      margin: 0;
    }
  }
  /deep/ .el-input-group {
    width: auto;
  }
}
.mainPath {
  margin-top: 0.52vw;
  position: relative;
  .close {
    width: 0.5vw;
    height: 0.5vw;
    display: block;
    position: absolute;
    left: 5vw;
    top: 0.5vw;
    background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  .classA {
    background: url("../../../../../../assets/images/indexBody/legendBackground.png");
    background-size: 100% 100%;
    width: 6.2vw;
    height: 11.58vw;
    font-size: 0.52vw;
    color: #ffffff;
    .positionClassA {
      position: absolute;
      top: 1.88vw;
      width: 6.2vw;
      .isActive {
        background-color: #1667ba;
      }
      .lineClassA {
        display: flex;
        align-items: center;
        height: 0.99vw;
        padding: 0 0.8vw 0 0.9vw;
        cursor: pointer;
        .legendBackground {
          background-size: 100% 100%;
          width: 0.52vw;
          height: 0.73vw;
        }
        .legendName {
          margin: 0 auto 0 0.65vw;
          user-select: none;
        }
        .legendRight {
          background-size: 100% 100%;
          width: 0.16vw;
          height: 0.26vw;
        }
      }
      .lineClassA:hover {
        background-color: #1667ba;
      }
    }
  }
  .classB,
  .classC,
  .classD,
  .classE,
  .classF,
  .classG,
  .classH {
    width: 13.93vw;
    padding-top: 0.3vw;
    position: absolute;
    top: 0;
    left: 6.46vw;
    background-image: linear-gradient(
      90deg,
      rgba(3, 83, 165, 0.72) 0%,
      #0c3463 100%
    );
    .personAll {
      display: flex;
      align-items: center;
      height: 0.99vw;
      margin-top: 0.16vw;
      padding-left: 0.49vw;
      /deep/ .el-checkbox__label {
        font-size: 0.52vw;
        color: #fff;
      }
    }
    /deep/ .el-checkbox-group {
      padding-left: 0.49vw;
    }
    .checkItem {
      height: 0.99vw;
      line-height: 0.99vw;
      width: 100%;
      /deep/ .el-checkbox__label {
        font-size: 0.52vw;
        color: #fff;
      }
    }
    .el-checkbox {
      margin-right: 0px;
    }
    /deep/ .enclosureAll {
      .el-checkbox__label {
        color: #fff;
      }
    }
  }
  .classB {
    height: 16vw;
    overflow: auto;
    overflow-x: hidden;
  }
  .classC {
    width: 7.43vw;
  }
  .classD {
    width: 5.43vw;
    /deep/ .el-checkbox-group {
      margin: 0;
    }
  }
  .classE {
    width: 5.43vw;
    .enclosureAll {
      padding-left: 0.49vw;
      color: #fff;
      height: 0.99vw;
      display: flex;
      align-items: center;
      /deep/.el-checkbox__label {
        font-size: 0.52vw;
      }
    }
  }
  .classF {
    width: 7.43vw;
  }
  .classG {
    width: 7.43vw;
    .areaAll {
      padding-left: 0.49vw;
      color: #fff;
      height: 0.99vw;
      display: flex;
      align-items: center;
      /deep/ .el-checkbox__label {
        color: #fff;
        font-size: 0.52vw;
      }
    }
    .areaItem {
      .checkItem {
        display: flex;
        align-items: center;
        /deep/.el-checkbox__label {
          display: flex;
          align-items: center;
          .itemColor {
            width: 0.52vw;
            height: 0.52vw;
            margin-left: 0.2vw;
          }
        }
      }
      .checkItem:nth-child(1) {
        /deep/ .el-checkbox__label .itemColor {
          background: #1336ab !important;
        }
      }
      .checkItem:nth-child(2) {
        /deep/ .el-checkbox__label .itemColor {
          background: #782c2e !important;
        }
      }
      .checkItem:nth-child(3) {
        /deep/ .el-checkbox__label .itemColor {
          background: #c3bb68 !important;
        }
      }
    }
  }
  .classH {
    width: 7.43vw;
    .roadAll {
      padding-left: 0.49vw;
      height: 0.99vw;
      display: flex;
      align-items: center;
      /deep/ .el-checkbox__label {
        color: #fff;
        font-size: 0.52vw;
      }
    }
    .roadItem {
      .checkItem {
        display: flex;
        align-items: center;
        /deep/.el-checkbox__label {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
